<template>
	<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="handleScroll" :style="{height: '100vh'}"
		class="page-container" :enable-back-to-top="false">
		<view class="layout">
			<view :class="['center','header',header_background]">
				<view class="">
					<view class="" style="width: 700rpx; text-align: left;">
						<view class="header_1">
							{{hello[time_status]}}，{{myname}}
						</view>
						<view class="header_2">
							{{say_hello[time_status]}}
						</view>

						<view :class="['header_3','center',button_background]" @click="govbtchoose">
							<view class="" style="width: 50rpx; height: 50rpx;">
								<img src="../../static/index/sanjiao.png" alt="" style="width: 50rpx; height: 50rpx;" />
							</view>
							<view class="">
								开始训练
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="center" style="justify-content: space-between; margin: 20rpx 52rpx; flex-wrap: nowrap;">
				<view class="module" style="padding-left: 24rpx; flex-shrink: 0;" @click="gotoPage(0)">
					<view class="small_img center purple_background">
						<img class="small_logo" :src="choose[0].img_url" alt="" />
					</view>
					<view class="small_title" style="text-align: left;">
						{{choose[0].title}}
					</view>
					<view class="small_content" style="text-align: left;">
						{{choose[0].content}}
					</view>
				</view>
				<view class="module" style="padding-left: 24rpx; flex-shrink: 0;" @click="gotoPage(1)">
					<view class="small_img center yellow_background">
						<img class="small_logo" style="height: 40rpx; width: 40rpx; " :src="choose[1].img_url" alt="" />
					</view>
					<view class="small_title" style="text-align: left;">
						{{choose[1].title}}
					</view>
					<view class="small_content" style="text-align: left;">
						{{choose[1].content}}
					</view>
				</view>
			</view>

			<view class="connect_module">
				<view class="center" style="justify-content: space-between; margin: 10rpx 28rpx;">
					<view class="module_title_left">
						设备连接
					</view>
					<view class="module_title_right" @click="machine_management">
						管理
					</view>
				</view>
				<view v-for="connect_machine in mch" class="machine_module center_left"
					:key="connect_machine.localName">
					<view class="purple_circle_background center" style="margin: auto 20rpx;">
						<img class="machine_img" :src="connect_machine.url" alt="" />
					</view>
					<view class="">
						<view class="connection_name">
							{{connect_machine.localName}}
						</view>
						<view :class="connect_machine.connectable=='已连接'?'connection_status':'disconnection_status'">
							{{connect_machine.connectable}}
						</view>
					</view>
				</view>
			</view>

			<view class="connect_module">
				<view class="center" style="justify-content: space-between; margin: 10rpx 28rpx;">
					<picker mode="selector" :range="rank_choose" @change="rank_name_change">
						<view class="module_title_left">
							{{ rank_name }}
						</view>
					</picker>
					<view class="module_title_right center" @click="search_all">
						<view class="">
							查看全部 >
						</view>
					</view>
				</view>
				<view class="machine_module center" v-for="(item,index) in ranking" :key="index" style="">
					<view class="center_left" style="width: 550rpx; text-align: left;">
						<view class="center" style="width: 50rpx; height: 50rpx;">
							<img :src="rank_img[index]" alt="" style="width: 50rpx; height: 50rpx;" />
						</view>
						<view class="touxiang">
							<img src="item.avat" alt="" />
						</view>
						<view class="" style="width: 320rpx;">
							<view class="rank_name">
								{{ zhixun || item.name  }}
							</view>
							<view class="center_left" style="">
								<view class="rank_value" style="width: 90rpx;">
									{{item.rankmode1RM || 100 }}
								</view>
								<view class="rank_unit">
									kg
								</view>
							</view>
						</view>
						<view class="rank_right">
							{{rank[index]}}
						</view>
					</view>
				</view>
			</view>

		</view>
	</scroll-view>
</template>

<script>
	import {
		jobList
	} from '../../apis/job.js';

	export default {
		data() {
			return {
				scrollTop: 0,
				lastScrollPosition: 0,
				myname: 'zhixun',
				choose: [{
						img_url: '../../static/index/1.png',
						title: '1RM记录',
						content: '最大力量测试的历史记录'
					},
					{
						img_url: '../../static/index/2.png',
						title: '动作库',
						content: '一库解锁500+健身动作'
					},
				],
				hello: ['早上好', '下午好', '晚上好'],
				say_hello: [
					'今日份铁片已就位，用爆发力开启新的一天！',
					'肌肉午休结束，力量轰炸倒计时！',
					'主宰今夜健身房，突破平台期的黄金时刻！',
				],
				time_status: 0,
				mch: [{
						url: '../../static/index/phone.png',
						localName: '手机',
						connectable: "已连接"
					},
					{
						url: '../../static/index/machine.png',
						localName: '外部设备',
						connectable: "未连接"
					},
				],
				rank_img: [
					'../../static/index/first.png',
					'../../static/index/second.png',
					'../../static/index/third.png',
				],
				rank: ["# 1", "# 2", "# 3"],
				ranking: [{
						'img': '../../static/index/first.png',
						name: '用户名',
						value: '16',
						unit: 'kg',
						rank: "# 1"
					},
					{
						'img': '../../static/index/second.png',
						name: '用户名',
						value: '160',
						unit: 'kg',
						rank: "# 2"
					},
					{
						'img': '../../static/index/third.png',
						name: '用户名',
						value: '1600',
						unit: 'kg',
						rank: "# 3"
					},
				],
				rank_name: '深蹲榜',
				rank_choose: ['深蹲榜', '卧推榜', '硬拉榜'],
			}
		},
		onLoad() {
			this.init_machine();
		},
		methods: {
			handleScroll(e) {
				const {
					scrollTop,
					scrollHeight,
					clientHeight
				} = e.detail;
				const maxScroll = scrollHeight - clientHeight;

				if (scrollTop >= maxScroll) {
					this.scrollTop = maxScroll;
					return;
				}

				this.lastScrollPosition = scrollTop;
			},
			govbtchoose() {
				uni.navigateTo({
					url: '/pagesTool/beginAction/beginAction'
				})
			},
			init_machine() {
				console.log("初始化设备列表");
				if (uni.getStorageSync('deviceData').length === 0) {
					return;
				}
				var machine = uni.getStorageSync('deviceData').localName;
				console.log("设备名字", machine);
				if (machine == "手机") {
					this.mch[0]['connectable'] = '已连接';
					this.mch[1]['connectable'] = '未连接';
				} else {
					this.mch[1]['connectable'] = '已连接';
					this.mch[0]['connectable'] = '未连接';
				}
				console.log(this.mch);
			},
			gotoPage(index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/pagesTool/historyRm/historyRm'
					});
				} else {
					uni.navigateTo({
						url: '/pagesTool/beginAction/beginAction'
					});
				}
			},
			rank_name_change(event) {
				const {
					value
				} = event.detail;
				this.rank_name = this.rank_choose[value];
				this.update_rank();
			},
			search_all() {
				if (this.rank_name === '深蹲榜') {
					uni.navigateTo({
						url: '/pages/job/job?value=0'
					})
				} else if (this.rank_name === '卧推榜') {
					uni.navigateTo({
						url: '/pages/job/job?value=1'
					})
				} else {
					uni.navigateTo({
						url: '/pages/job/job?value=2'
					})
				}
			},
			machine_management() {
				console.log("跳转设备连接页面");
				uni.navigateTo({
					url: '/pagesTool/deviceConnect/deviceConnect'
				})
			},
			getTimeOfDay() {
				const hour = new Date().getHours();
				if (hour >= 6 && hour < 12) {
					this.time_status = 0;
				} else if (hour >= 12 && hour < 18) {
					this.time_status = 1;
				} else {
					this.time_status = 2;
				}
			},
			getName() {

				this.myname = uni.getStorageSync('userInfo').nickName;
				console.log("我的名字是：", this.myname);
			},
			update_rank() {
				console.log("开始请求rank");
				let paramsData = {
					type: this.rank_name.substring(0, 2)
				}
				jobList(paramsData).then(res => {
					if (res.status == 'success') {
						console.log("结果1是", res.data.theChartsList);
						this.ranking = res.data.theChartsList.slice(0, 3);
					} else {
						console.log("请求失败");
					}
				})
			}
		},
		mounted() {
			this.getTimeOfDay();
			this.update_rank();
			this.getName();
		},
		computed: {
			header_background() {
				if (this.time_status == 0) {

					return 'morning_background';
				} else if (this.time_status == 1) {
					return 'afternoon_background';
				} else {
					return 'evening_background';
				}
			},
			button_background() {
				if (this.time_status == 0) {

					return 'morning_button';
				} else if (this.time_status == 1) {
					return 'afternoon_button';
				} else {
					return 'evening_button';
				}
			},
			logo_background(index) {
				console.log("now is ", index);
				if (index == '1RM记录') {
					console.log("first");
					return 'purple_background';
				} else {
					console.log("second");
					return 'yellow_background';
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		overflow: hidden;
	}

	.page-container {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.layout {
		overflow-x: hidden;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		font-family: '优设标题黑';
		background: rgba(110, 88, 170, 0.02);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}


	.center {
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.sanjiao {
		width: 24rpx;
		height: 24rpx;
		margin: auto 5rpx;
		border: 1px solid black;
		margin-right: 10rpx;
	}

	.center_left {
		display: flex;
		align-items: center;
		text-align: left;
	}

	.rank_name {
		font-size: 36rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 53rpx;
		color: rgba(0, 0, 0, 1);
	}

	.rank_value {
		font-size: 36rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 47rpx;
		color: rgba(124, 124, 126, 1);
	}

	.rank_unit {
		font-size: 25rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 21rpx;
		color: rgba(124, 124, 126, 1);
	}

	.connection_name {
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 37rpx;
		color: rgba(0, 0, 0, 1);
	}

	.connection_status {
		font-size: 20rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 26rpx;
		margin-top: 10rpx;
		color: rgba(22, 163, 74, 1);
	}

	.disconnection_status {
		font-size: 20rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 26rpx;
		margin-top: 10rpx;
		color: rgba(124, 124, 126, 1);
	}

	.rank_right {
		font-size: 36rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 47rpx;
		color: rgba(0, 0, 0, 1);
		white-space: nowrap;
	}

	.touxiang {
		width: 40px;
		height: 40px;
		opacity: 1;
		background: rgba(124, 124, 126, 0.2);
		border-radius: 50%;
		margin: auto 14rpx;
	}

	.purple_circle_background {
		width: 70rpx;
		height: 70rpx;
		opacity: 1;
		background: rgba(110, 88, 170, 0.2);
		border-radius: 50%;
	}

	.machine_img {
		width: 50rpx;
		height: 50rpx;
	}

	.module_title_left {
		font-size: 36rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 47rpx;
		color: rgba(0, 0, 0, 1);
	}

	.machine_module {
		height: 126rpx;
		opacity: 1;
		border-radius: 8rpx;
		background: rgba(124, 124, 126, 0.03);
		margin: 20rpx 28rpx;
	}

	.module_title_right {
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 31rpx;
		color: rgba(110, 88, 170, 1);
	}

	.module {
		width: 280rpx;
		height: 200rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 0.5);
		border: 1px solid rgba(124, 124, 126, 0.2);
		border-radius: 4px;
		flex-shrink: 0;
	}

	.connect_module {
		opacity: 1;
		border-radius: 14rpx;
		background: rgba(255, 255, 255, 0.5);
		border: 1px solid rgba(124, 124, 126, 0.2);
		margin: 40rpx 52rpx;
	}

	.header {
		width: 100%;
		height: 270rpx;
		opacity: 1;
		margin: 0rpx auto;
		flex-shrink: 0;
	}

	.header_1 {
		font-size: 48rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 63rpx;
		color: rgba(0, 0, 0, 1);
	}

	.small_img {
		width: 68rpx;
		height: 68rpx;
		opacity: 1;
		border-radius: 24rpx;
		margin-top: 24rpx;
	}

	.small_logo {
		width: 51rpx;
		height: 51rpx;
	}

	.purple_background {
		background: rgba(110, 88, 170, 0.2);
	}

	.yellow_background {
		background: rgba(243, 194, 177, 0.2);
	}

	.small_title {
		font-size: 36rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 37rpx;
		color: rgba(0, 0, 0, 1);
		margin-top: 10rpx;
	}

	.small_content {
		font-size: 20rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 26rpx;
		color: rgba(124, 124, 126, 1);
		margin-top: 8rpx;
	}

	.header_2 {
		margin-bottom: 22rpx;
		font-size: 32rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 42rpx;
		color: rgba(124, 124, 126, 1);
	}

	.header_3 {
		width: 206rpx;
		height: 76rpx;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 35rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 42rpx;
		color: rgba(255, 255, 255, 1);
	}

	.morning_background {
		background: linear-gradient(146.1deg, rgba(183, 207, 235, 0.6) 0%, rgba(144, 189, 240, 0) 100%);
	}

	.afternoon_background {
		background: linear-gradient(159.82deg, rgba(245, 217, 208, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
	}

	.evening_background {
		background: linear-gradient(165.65deg, rgba(110, 88, 170, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
	}

	.morning_button {
		background: rgba(42, 130, 228, 1);
	}

	.afternoon_button {
		background: rgba(243, 194, 177, 1);
	}

	.evening_button {
		background: rgba(110, 88, 170, 1);
	}
</style>